// var
@audio-prefix-cls       : x-audio;
@audio-main-color       : #A5907B;
@audio-bg-color         : #16151A;
@audio-font-size-small  : 12px;
@audio-font-size        : 14px;
@audio-font-size-large  : 16px;
@audio-font-color       : #999;

// mixins
.audio-size(@base-size) {
  font-size: @base-size;
  .@{audio-prefix-cls} {
    &__panel {
      &_head {
        height: @base-size * 3;
      }
      &_body {
        height: @base-size * 20;
      }
    }
    &__toolsbar {
      &_row {
        height: @base-size * 1.6;
        line-height: @base-size * 1.6;
        .xvu-iconfont {
          font-size: @base-size * 1.2;
        }
      }
      &_left {
        &_icon:nth-child(1),
        &_icon:nth-child(3) {
          font-size: @base-size * 1.5;
          line-height: @base-size * 3.2;
          .size(@base-size * 1.6, @base-size * 3.2);
        }
        &_icon:nth-child(2) {
          .size(@base-size * 3.2, @base-size * 3.2);
        }
      }
      &_duration {
        font-size: @base-size;
        line-height: @base-size * 2;
      }
      &_poster {
        .size(@base-size * 3.2, @base-size * 3.2);
      }
    }
  }
}

// styles
.@{audio-prefix-cls} {
  .audio-size(@audio-font-size);
  background-color: @audio-bg-color;
  user-select: none;
  position: relative;
  audio {
    display: none;
  }
  &__visualization {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    transform: translateY(-100%);
    canvas {
      .absolute-fullscreen;
      width: 100%;
      height: 100%;
    }
  }
  &__panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateY(-100%);
    display: flex;
    color: tint(@audio-main-color, 40%);
    background-color: tint(@audio-bg-color, 15%);
    box-shadow: 0 0 5px fade(@audio-bg-color, 40%);
    &_left { width: 0; flex-grow: 3; }
    &_right { width: 0; flex-grow: 2; }
    &-collapse { display: none; }
    &_child + .@{audio-prefix-cls}__panel_child {
      border-left: 1px solid tint(@audio-bg-color, 30%);
    }
    &_head {
      line-height: 3;
      border-bottom: 1px solid tint(@audio-bg-color, 30%);
      .fl {
        width: calc(100% - 3em);
        height: 100%;
        padding: 0 .5em;
        letter-spacing: .1em;
        .xvu-iconfont {
          font-size: inherit;
        }
      }
    }
    &_body {
      padding: .5em;
      overflow: hidden auto;
      &-nodata {
        margin-top: 5em;
        text-align: center;
        color: fade(tint(@audio-main-color, 50%), 40%);
      }
    }
    &_btn {
      width: 3em;
      height: 100%;
      cursor: pointer;
      .flex-center;
    }
  }
  &__menu {
    &_item {
      padding: .2em .5em;
      margin-bottom: .5em;
      cursor: pointer;
      &_label {
        line-height: 2;
        display: flex;
        &_title {
          width: 0;
          flex-grow: 1;
          .text-ellipsis;
        }
        &_duration {
          width: 4em;
          text-align: right;
        }
      }
      &:hover, &:focus, &.active {
        background-color: rgba(255,255,255,.075);
        text-shadow: 1px 1px 1px @audio-bg-color;
      }
    }
  }
  &__lyric {
    .@{audio-prefix-cls}__panel_body {
      font-size: .9em;
      line-height: 2;
    }
  }
  &__toolsbar {
    padding: 10px 6px;
    border-radius: .3em;
    background-color: fade(@audio-bg-color, 90%);
    box-shadow: 0 0 5px fade(@audio-bg-color, 40%);
    display: flex;
    &_left {
      &_icon {
        display: inline-block;
        text-align: center;
        .xvu-play,
        .xvu-pause {
          width: 100%;
          height: 100%;
          border: 1px solid @audio-main-color;
          border-radius: 50%;
          font-size: 1.4em;
          .flex-center;
          &:hover {
            border-color: tint(@audio-main-color, 30%);
          }
        }
      }
    }
    &_middle {
      padding: 0 .5em;
      .@{audio-prefix-cls}__toolsbar_poster {
        display: block;
        margin-right: .5em;
        border-color: fade(tint(@audio-main-color, 50%), 40%);
        border-radius: .5em;
        object-fit: cover;
      }
    }
    &_right {
      width: 0;
      flex-grow: 1;
    }
    &_row {
      display: flex;
      &_left {
        width: 0;
        flex-grow: 1;
      }
      &_right {
        margin-left: 1em;
      }
    }
    &_progress {
      margin: 0 3px;
    }
    .xvu-iconfont {
      color: @audio-main-color;
      cursor: pointer;
      &:hover {
        color: tint(@audio-main-color, 30%);
      }
    }
    &_title {
      color: @audio-main-color;
      .text-ellipsis;
    }
    &_btn {
      display: inline-block;
      height: 100%;
      color: @audio-main-color;
      cursor: pointer;
      position: relative;
      & + .@{audio-prefix-cls}__toolsbar_btn {
        margin-left: .5em;
      }
    }
    &_duration {
      display: inline-block;
      height: 100%;
      margin-left: .5em;
      color: @audio-main-color;
    }
    .@{audio-prefix-cls}-poptip {
      position: absolute;
      left: 50%;
      bottom: 100%;
      z-index: 2;
      transform: translate(-50%, -0.75em);
      min-width: 4em;
      font-size: @audio-font-size-small;
      text-align: center;
      &-item {
        height: @audio-font-size-small * 2;
        line-height: @audio-font-size-small * 2;
        padding: 0 .5em;
        border-bottom: 1px solid tint(@audio-bg-color, 30%);
        .text-ellipsis;
        &.active, &:hover {
          text-shadow: 1px 1px 1px @audio-bg-color;;
          background-color: tint(@audio-bg-color, 20%);
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
    &_volume {
      .@{audio-prefix-cls}-poptip {
        min-width: 2.5em;
        height: @audio-font-size-small * 8;
        padding-top: 1em;
        padding-bottom: 1em;
      }
    }
  }
}

// styles - more
.@{audio-prefix-cls} {
  &-small {
    .audio-size(@audio-font-size-small);
  }
  &-large {
    .audio-size(@audio-font-size-large);
  }
}
